import ChartBase from "./chart-base";
import {
  grid,
  legend,
  gridConfig,
  legendConfig,
  pieSeriesLabel,
  pieSeriesLabelLine,
  pieSeriesLabelConfig,
  pieSeriesLabelLineConfig,
  tooltip,
  tooltipConfig,
} from "./common";
import { deepClone, mergeObject } from "@/utils";
export default class PieCirque extends ChartBase {
  constructor() {
    super();
  }

  // 基础描述
  _info = {
    name: "环图",
    type: "pie-cirque", // 图表类型

    group: "pie", // 图表分类
    component: "e-chart",
    icon: "pie-cirque", // 图表展示ICON
  };

  // 总 配置项
  _defaultOption = {
    dataset: {
      source: [],
      dimensions: [],
    },
    grid,
    legend: {
      show: true,
      top: "5%",
    },
    tooltip,
    series: [],
  };
  // 系列
  _defaultSeries = {
    type: "pie",
    radius: ["58%", "70%"],
    center: ["50%", "55%"],
    label: pieSeriesLabel,
    labelLine: pieSeriesLabelLine,
  };

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: "维度",
      key: "xField",
      type: ["string", "date", "number"],
      limit: 1,
    },
    {
      label: "指标",
      key: "yField",
      type: ["number"],
      limit: 1,
    },
  ];

  // 样式配置描述信息
  _styleOptionConfig = [
    {
      label: "环图样式",
      bindKeys: "_group.echart",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "环图大小",
      bindKeys: "series.radius",
      controlType: "slider-interval",
      controlValue: ["54%", "65%"],
      controlProps: {
        min: 20, // 最小值
        max: 100, // 最大值
        step: 1, // 步长
        range: true,
      },
      controlConfigs: {
        suffix: "%",
      },
    },
    {
      label: "环图位置",
      bindKeys: "series.center",
      controlType: "slider-interval",
      controlValue: ["25%", "50%"],
      controlProps: {
        min: 0,
        max: 100,
        step: 5,
        range: true,
      },
      controlConfigs: {
        suffix: "%",
      },
    },
    {
      label: "图例配置",
      bindKeys: "_group.legend",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "显示",
      bindKeys: "option.legend.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "位置",
      bindKeys: "config.legend.position",
      controlType: "select",
      controlValue: "right",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "顶部",
            value: "top",
          },
          {
            label: "右侧",
            value: "right",
          },
        ],
      },
    },
    {
      label: "数值",
      bindKeys: "config.value.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "百分比",
      bindKeys: "config.percent.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    ...tooltipConfig,
    ...pieSeriesLabelConfig,
    ...pieSeriesLabelLineConfig,
  ];

  getOption({
    dataField = [],
    dataList = [],
    dataTotal = 0,
    dataPoolField,
    styleOptionConfig = [],
    themeColor = [],
    themeStyle = {},
  }) {
    // 更新描述字段
    this._updateDataPoolField(dataField, dataPoolField);

    let data = [];

    const { xField, yField } = dataPoolField;

    if (xField.length && yField.length) {
      data = dataList.reduce((r, c) => {
        r.push({
          name: c[xField[0].fieldName],
          value: c[yField[0].fieldName],
        });
        return r;
      }, []);
    }

    let { option, series, config } =
      this._transformStyleOptionConfig(styleOptionConfig);

    let defaultOption = deepClone(this._defaultOption);
    let defaultSeries = deepClone(this._defaultSeries);

    // 先合并主题
    // if (defaultOption && themeStyle) defaultOption = mergeObject(defaultOption, themeStyle)
    // if (defaultSeries && themeStyle) defaultSeries = mergeObject(defaultSeries, themeStyle)

    // 再合并自定义配置项
    if (defaultOption && option)
      defaultOption = mergeObject(defaultOption, option);
    if (defaultSeries && series)
      defaultSeries = mergeObject(defaultSeries, series);

    // defaultSeries.center = [`${config.left.value}%`, `${config.top.value}%`];

    if (config.legend.position === "right") {
      defaultOption.legend = {
        show: option.legend.show,
        right: "5%",
        orient: "vertical",
        top: "center",
      };
    } else {
      defaultOption.legend = {
        show: option.legend.show,
        top: "5%",
      };
    }

    defaultOption.color = themeColor;

    if (
      this._info.component === "e-chart" &&
      defaultOption.series &&
      defaultOption.series instanceof Array
    ) {
      defaultOption.series.push({
        ...defaultSeries,
        data: data,
      });
    }

    let total = data.reduce((r, c) => {
      r += c.value;
      return r;
    }, 0);

    defaultOption.legend.formatter = (name) => {
      let item = data.find((f) => f.name === name);

      if (config.percent.show && config.value.show) {
        return (
          name +
          "   |   " +
          Math.round((item?.value === 0 ? 0 : item?.value / total) * 10000) / 100 +
          "%" +
          "    " +
          item.value
        );
      } else if (config.percent.show) {
        return (
          name +
          "   |   " +
          Math.round((item?.value === 0 ? 0 : item?.value / total) * 10000) / 100 +
          "%"
        );
      } else if (config.value.show) {
        return name + "   |   " + item.value;
      } else {
        return name;
      }
    };

    return defaultOption;
  }

  getClickData(event) {
    const { name, seriesName, value } = event;

    return {
      label: name,
      value: name,
    };
  }
}
